<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Flexigrid</title>
		<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
		<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
		<script type="text/javascript" src="flexigrid.js"></script>
		<script type="text/javascript">
		function checkeds(kk)
		{
			var checks=document.getElementsByName('userCheck');
			for(var count=0;count<checks.length;count++)
			{
				if(kk.checked)
					checks[count].checked=true;
				else
					checks[count].checked=false;
			}
		}
$(document).ready(function(){
	
	$("#flex1").flexigrid({
			url: 'GetUsersList.action',
			dataType: 'json',
			colModel : [
				{display: '<input type="checkbox" alt="全选" onclick="checkeds(this)">', name : 'getAll', width : 50, sortable : true, align: 'center'},
				{display: '编号', name : 'id', width : 40, sortable : true, align: 'center'},
				{display: '名称', name : 'name', width : 40, sortable : true, align: 'center'},
				{display: '邮箱', name : 'email', width : 180, sortable : true, align: 'left'},
				{display: '年龄', name : 'age', width : 120, sortable : true, align: 'left'},
				{display: '密码', name : 'password', width : 130, sortable : true, align: 'left', hide: true},
				{display: '备注', name : 'numcode', width : 80, sortable : true, align: 'right'}
				],
			buttons : [
				{name: '增加', bclass: 'add', onpress : test},
				{name: '删除', bclass: 'delete', onpress : test},
				{separator: true},
				{name: 'A', onpress: sortAlpha},{name: 'B', onpress: sortAlpha},{name: 'C', onpress: sortAlpha},{name: 'D', onpress: sortAlpha},{name: 'E', onpress: sortAlpha},{name: 'F', onpress: sortAlpha},{name: 'G', onpress: sortAlpha},{name: 'H', onpress: sortAlpha},{name: 'I', onpress: sortAlpha},{name: 'J', onpress: sortAlpha},{name: 'K', onpress: sortAlpha},{name: 'L', onpress: sortAlpha},{name: 'M', onpress: sortAlpha},{name: 'N', onpress: sortAlpha},{name: 'O', onpress: sortAlpha},{name: 'P', onpress: sortAlpha},{name: 'Q', onpress: sortAlpha},{name: 'R', onpress: sortAlpha},{name: 'S', onpress: sortAlpha},{name: 'T', onpress: sortAlpha},{name: 'U', onpress: sortAlpha},{name: 'V', onpress: sortAlpha},{name: 'W', onpress: sortAlpha},{name: 'X', onpress: sortAlpha},{name: 'Y', onpress: sortAlpha},{name: 'Z', onpress: sortAlpha},{name: '#', onpress: sortAlpha}
				],
			searchitems : [
				{display: '编号', name : 'id'},
				{display: '名称', name : 'name', isdefault: true}
				],
			sortname: "id",
			sortorder: "asc",
			usepager: true,
			title: '用户列表',
			useRp: true,
			rpOptions: [1,10,15,20,25,40],//可选择设定的每页结果数 
			rp: 1,
			showTableToggleBtn: false,//折叠
			resizable: false,
			striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
			width: 700,
			height: 255
			});   
	
});
function sortAlpha(com)
			{ 
			jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
			jQuery("#flex1").flexReload(); 
			}

function test(com,grid)
{
    if (com=='删除')
        {
           if($('.trSelected',grid).length>0){
		   if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
            var items = $('.trSelected',grid);
            var itemlist ='';
        	for(i=0;i<items.length;i++){
				itemlist+= items[i].id.substr(3)+",";
			}
			$.ajax({
			   type: "POST",
			   dataType: "json",
			   url: "delete.php",
			   data: "items="+itemlist,
			   success: function(data){
			   	alert("Query: "+data.query+" - Total affected rows: "+data.total);
			   $("#flex1").flexReload();
			   }
			 });
			}
			} else {
				return false;
			} 
        }
    else if (com=='增加')
        {
        	var checks=document.getElementsByName('userCheck');
			for(var count=0;count<checks.length;count++)
			{
				if(checks[count].checked)
					alert("value:"+checks[count].value);
			}
            alert('Add New Item Action');
        }            
} 
</script>
	</head>

	<body>
		<h1>
			Flexigrid Example Page
		</h1>
		<a href="http://webplicity.net/flexigrid/">Flexigrid home</a>
		<a href="http://codeigniter.com/forums/viewthread/75326">Flexigrid
			discussion on CodeIgniter forum</a>
		<br />
		<br />
		<b>Demonstrating the flexgrid with search and delete functionality</b>
		<br />
		<br />
		<table id="flex1" style="display: none"></table>
		<br />
		<br />
		<a href="flexigrid.zip">Download this example</a>
	</body>
</html>